<template>
    <div class="chat-main">
     <!-- 先循环找到你想要聊天的那个人 -->
    <div v-for="(list, index) in chatMessageList" :key="index">
      <!-- 有聊天记录：循环聊天记录 -->
      <div v-if="(list.receiver==userInfo.name)&&userInfo.name=='默认群聊'">
        <!-- 再循环显示聊天记录 --> 
        <p :class="{'right':list.type=='my'}">
          <el-avatar v-if="list.type=='user'" :src="list.senderimg"></el-avatar>
          <el-avatar v-if="list.type=='my'" :src="list.senderimg" style="float:right;"></el-avatar>
          <span class="content">{{list.msg}}</span>
        </p>
      </div>
      <div v-else>
        <!-- 根据接收者和发送者定位聊天记录 -->
        <div v-if="((list.receiver==myInfo.name)&&(list.sender==userInfo.name))||((list.receiver==userInfo.name)&&(list.sender==myInfo.name))">
            <!-- 再循环显示聊天记录 --> 
            <p :class="{'right':list.type=='my'}">
              <el-avatar v-if="list.type=='user'" :src="list.senderimg"></el-avatar>
              <el-avatar v-if="list.type=='my'" :src="list.senderimg" style="float:right;"></el-avatar>
              <span class="content">{{list.msg}}</span>
            </p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import store from '@/store/index';
export default {
    name: 'ChatroomMyMain',

    data() {
        return {           
            // chatMessageList: [
            //     {
            //     username: "33",
            //     list: [
            //         {
            //         type: "my",
            //         time: "",
            //         msg: "你好啊",
            //         },
            //         {
            //         type: "user",
            //         time: "",
            //         msg: "你好啊",
            //         },
            //         {
            //         type: "user",
            //         time: "",
            //         msg: "你好啊",
            //         },
            //     ],
            //     },
            // ],
        };
    },

    mounted() {
        
    },
    computed:{
        userInfo(){
            return store.state.userInfo;
        },
        myInfo(){
            return store.state.myInfo;
        },
        chatMessageList(){
          console.log(store.state.chatMessageList)
          return store.state.chatMessageList;
        }
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.chat-main{
    width: auto;
}
.chat-main P{
  width: 100%;
  height: 50px;
}
.content{
background-color: antiquewhite;
padding: 10px;
border-radius: 10px;
font-weight: bold;
}
.right{
  text-align: right;
}
</style>